<template>
  <div class="app-container">
    <div class="dashboard-header">
      <el-row>
        <el-col :span="24">
          <div class="header-title">
            <i class="el-icon-office-building"></i> 资产管理
          </div>
          <div class="user-info">
            <span class="username">张三</span>
            <span class="user-role">超级管理员</span>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <div class="dashboard-content">
      <!-- 数据卡片区域 -->
      <StatisticsCards />
      
      <!-- 图表区域 -->
      <div class="chart-layout">
        <div class="main-charts">
          <!-- 资产柱状图 -->
          <AssetChart />
          
          <!-- 趋势图 -->
          <TrendChart />
        </div>
        
        <!-- 区域分布图 -->
        <div class="side-chart">
          <RegionDistribution />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, provide } from 'vue'
import StatisticsCards from './components/StatisticsCards.vue'
import AssetChart from './components/AssetChart.vue'
import RegionDistribution from './components/RegionDistribution.vue'
import TrendChart from './components/TrendChart.vue'
import { getAssetStatistics } from '@/api/assets/statistics'

const statisticsData = ref({})

// 获取资产统计数据
const getStatisticsData = async () => {
  try {
    const res = await getAssetStatistics()
    if (res.code === 200) {
      statisticsData.value = res.data
    }
  } catch (error) {
    console.error('获取资产统计数据失败', error)
  }
}

onMounted(() => {
  getStatisticsData()
})

// 定义为provide，供子组件使用
provide('statisticsData', statisticsData)
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  background-color: #f5f7fa;
  min-height: calc(100vh - 50px);
  
  .dashboard-header {
    background-color: #1890ff;
    padding: 0 15px;
    color: #fff;
    height: 60px;
    line-height: 60px;
    position: relative;
    
    .header-title {
      font-size: 20px;
      font-weight: bold;
      display: inline-block;
      
      i {
        margin-right: 5px;
      }
    }
    
    .user-info {
      position: absolute;
      right: 20px;
      top: 0;
      display: flex;
      align-items: center;
      
      .username {
        margin-right: 10px;
        font-weight: bold;
      }
      
      .user-role {
        font-size: 12px;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 10px;
      }
    }
  }
  
  .dashboard-content {
    padding: 15px;
    
    .chart-layout {
      display: flex;
      margin-top: 20px;
      gap: 20px;
      
      .main-charts {
        flex: 3;
      }
      
      .side-chart {
        flex: 1;
      }
    }
  }
}
</style>

